//引入用来发送请求的方法  一定要把路径补全
import {
  request
} from "../../request/request.js";
import regeneratorRuntime from "../../lib/runtime/runtime.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    /* 左侧菜单数据 */
    leftMenuList: [],
    /* 右侧商品数据 */
    rightContent: [],
    /* 被点击的左侧的菜单 */
    currentIndex: 0,
    /* 右侧内容的滚动条距离顶部的距离 */
    scrollTop: 0

  },
  /* 接口返回数据 */
  Cates: [],



  onLoad: function (options) {
    /*0.web存储和小程序存储的区别
        1.代码不同
          web：localStorage.setItem("key","value");  localStorage.getItem("key")
          小程序中：wx.setStorageSync("key", "value"); wx.getStorageSync("key")
        2.存的时候有没有类型转换
          web：不管存入什么类型，都先调用toString() 再存入进去
          小程序：没有类型转换

      1.先判断本地存储中有没有旧的数据
        {time:Date.now(),data:[...]}
      2.没有旧的数据，直接发送新请求
      3.如果有旧的数据，同时旧数据也没有过期，就使用本地存储中的旧数据 */

    //1.获取本地存储的数据
    const Cates = wx.getStorageSync("cates");
    //2.判断
    if (!Cates) {
      //不存在，发送请求获取数据
      this.getCates();
    } else {
      //有旧数据  定义过期时间  10s 改成5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        //重新发送请求
        this.getCates();
      } else {
        //可以使用旧数据
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  /* 获取分类页面的方法 */
  async getCates() {
    // request({
    //     url: '/categories'
    //   })
    //   .then(res => {
    //     this.Cates = res.data.message;

    //     //把接口的数据存到本地存储中
    //     wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});

    //     // 构造左侧的大菜单数据
    //     let leftMenuList = this.Cates.map(v => v.cat_name);
    //     // 构造右侧的商品数据
    //     let rightContent = this.Cates[0].children;
    //     this.setData({
    //       leftMenuList,
    //       rightContent
    //     })

    //   })

    //1.使用es7的async 和 await 发送异步请求
    const res = await request({url: "/categories"});
    // this.Cates = res.data.message;
    this.Cates = res;

    //把接口的数据存到本地存储中
    wx.setStorageSync("cates", {
      time: Date.now(),
      data: this.Cates
    });

    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name);
    // 构造右侧的商品数据
    let rightContent = this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightContent
    })

  },
  /* 左侧菜单的点击事件 */
  handleItemTap(e) {
    /* 
      1.获取被点击的菜单的索引
      2.给data中的currentIndex赋值
      3.根据不同的索引渲染右侧内容
    */
    const {
      index
    } = e.currentTarget.dataset;

    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      //重新设置右侧内容的scroll-view标签的距离顶部的距离
      scrollTop: 0

    })

  }
})